<template>
  <V-CommonHeaderLeft>
    <div class="inventory">
      <Navigation :msg="navMsg"></Navigation>
      <div class="stock-table"
           :style="{height: tableHeight}">
        <div class="datum">
          <div v-for="(item,index) in 6"
               :key="index"
               class="item-div">
            <p class="title">总库存量</p>
            <p class="num">-364191</p>
          </div>
        </div>
        <div class="graph-box">
          <el-table ref="multipleTable"
                    :data="stock"
                    style="width: 100%;"
                    class="table-class">
            <el-table-column type='index'
                             label="序号"
                             min-width="5%">
            </el-table-column>
            <el-table-column prop="size"
                             min-width="9.5%"
                             label="客户名称">
              <template slot-scope="scope">
                <span :title="scope.row.size">{{ scope.row.size }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="belong"
                             min-width="9.5%"
                             label="客户类型">
              <template slot-scope="scope">
                <span :title="scope.row.belong">{{ scope.row.belong }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="unit"
                             min-width="9.5%"
                             label="所属区域">
              <template slot-scope="scope">
                <span :title="scope.row.unit">{{ scope.row.unit }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="systemStock"
                             min-width="9.5%"
                             label="所属员工">
              <template slot-scope="scope">
                <span :title="scope.row.systemStock">{{ scope.row.systemStock }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="lastPrice"
                             min-width="9.5%"
                             sortable
                             label="订单总金额">
              <template slot-scope="scope">
                <span :title="scope.row.lastPrice">{{ scope.row.lastPrice }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="securityStock"
                             min-width="9.5%"
                             label="订单笔数"
                             sortable>
              <template slot-scope="scope">
                <span :title="scope.row.securityStock">{{ scope.row.securityStock }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="securityStock"
                             min-width="9.5%"
                             label="应收欠款"
                             sortable>
              <template slot-scope="scope">
                <span :title="scope.row.securityStock">{{ scope.row.securityStock }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="securityStock"
                             min-width="9.5%"
                             label="收款待审核"
                             sortable>
              <template slot-scope="scope">
                <span :title="scope.row.securityStock">{{ scope.row.securityStock }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="securityStock"
                             min-width="9.5%"
                             label="应付退款"
                             sortable>
              <template slot-scope="scope">
                <span :title="scope.row.securityStock">{{ scope.row.securityStock }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="securityStock"
                             min-width="9.5%"
                             label="退款待审核"
                             sortable>
              <template slot-scope="scope">
                <span :title="scope.row.securityStock">{{ scope.row.securityStock }}</span>
                <div class="hover-box">
                  <router-link to="#">查看详细</router-link>
                  <router-link to="#">批量收款</router-link>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <Paging :msg="pageMsg.length"
              ref="fn"
              @pageNum="getPageNum"
              @pageId="getPageId"></Paging>
    </div>
  </V-CommonHeaderLeft>
</template>
<script>
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
import Navigation from '@/components/common/navigation/Navigation'
import Paging from '@/components/common/paging/Paging'
export default {
  data () {
    return {
      tableHeight: '',
      pageNum: 15, // 每页默认显示15条,
      pageId: 1, // 页面id
      navMsg: [
        {
          name: '客户',
          path: '/customerList'
        },
        {
          name: '客户对账',
          path: ''
        }
      ],
      stock: [],
      pageMsg: [
        {
          goods: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装/99032'
        },
        {
          goods: '订做款女士睡衣长袖冰绸丝韩版翻领条纹春秋夏款家居服两件套装/99032'
        }
      ]
    }
  },
  created () {
    this.stock = this.pageMsg
    this.getHight()
    window.addEventListener('resize', this.getHight)
  },
  destroyed () {
    window.removeEventListener('resize', this.getHight)
  },
  methods: {
    getHight () {
      this.tableHeight = window.innerHeight - 160 + 'px'
    },
    getPageId (id = 1) {
      this.pageId = id
      this.stock = this.$refs.fn.sliceArray(this.pageMsg, this.pageNum, id - 1)
    },
    getPageNum (num) {
      this.pageNum = num
      this.getPageId()
    }
  },
  components: {
    Navigation,
    Paging,
    VCommonHeaderLeft
  }
}
</script>
<style lang="scss" scoped>
.inventory {
  width: 100%;
  overflow: hidden;
  margin-right: 10px;
  background-color: #fff;
  .stock-table {
    width: 100%;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: hidden;
    &:hover {
      overflow-y: overlay;
    }
    &::-webkit-scrollbar {
      width: 8px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: rgba(0, 0, 0, 0.2);
    }
    &::-webkit-scrollbar-track {
      border-radius: 0;
      background-color: rgba(0, 0, 0, 0.1);
    }
    .datum {
      display: flex;
      padding: 10px 0;
      width: 100%;
      .item-div {
        flex: 1;
        padding: 24px 0;
        text-align: center;
        position: relative;
        .title {
          font-size: 12px;
          color: #666;
          margin-bottom: 8px;
          line-height: 1;
        }
        .num {
          font-size: 18px;
          font-weight: bold;
          color: #666;
          padding: 0 16px;
        }
        &::after {
          content: "";
          width: 1px;
          height: 50px;
          background-color: #e3e3e3;
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
        }
      }
    }
  }
  @mixin el-common($el-color, $el-height, $el-class) {
    padding: 0;
    color: $el-color;
    height: $el-height;
    line-height: $el-height;
    text-align: center;
    #{$el-class} {
      width: 100%;
      line-height: 20px;
      display: -webkit-box;
      overflow: hidden;
      white-space: normal !important;
      text-overflow: ellipsis;
      word-wrap: break-word;
      word-break: break-all;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
  /deep/ .table-class {
    font-size: 12px;
    tr {
      position: relative;
      &:hover {
        .hover-box {
          display: flex;
        }
      }
      td {
        @include el-common(
          $el-color: #333,
          $el-height: 40px,
          $el-class: "span"
        );
        .hover-box {
          display: none;
          position: absolute;
          top: 0;
          right: 0;
          height: 100%;
          border: 0 none;
          background-color: #a3bbd4;
          box-shadow: none;
          align-items: center;
          text-align: center;
          cursor: pointer;
          white-space: normal;
          word-break: normal;
          z-index: 2;
          a {
            display: flex;
            width: 80px;
            color: #ffffff;
            height: 100%;
            justify-content: center;
            align-items: center;
            font-size: 12px;
          }
        }
      }
      th {
        @include el-common(
          $el-color: #666,
          $el-height: 50px,
          $el-class: ".cell"
        );
        font-weight: normal;
        background-color: #fcfcfc;
      }
    }
  }
}
</style>
